<!--
 * @Descripttion: 
 * @version: 
 * @Author: 程
 * @Date: 2022-12-01 11:32:04
 * @LastEditors: 程
 * @LastEditTime: 2023-04-12 09:03:35
-->
<template>
  <div class="main">
    <h3>{{ $t('tool.directory1') }}</h3>
    <div class="line"></div>
    <div class="card">
      <el-card class="card-item" v-for="item in items.list" :key="item.id" @click="toUrl(item.url)">
        <div class="title">{{ item.text }}</div>
        <img class="logo" :src="item.img" alt="" />
        <div class="intr">{{ item.introduction }}</div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
const items = reactive({
  list: [
    { id: 1, text: 'Element-ui', introduction: '基于 Vue 2.0 的桌面端组件库', img: getImageUrl('elementv2'), url: 'https://element.eleme.cn/#/zh-CN' },
    { id: 2, text: 'Element-plus', introduction: '基于 Vue 3，面向设计师和开发者的组件库', img: getImageUrl('element'), url: 'https://element-plus.org' },
    { id: 3, text: 'Ant Design', introduction: '助力设计开发者更灵活地搭建出更美的产品', img: getImageUrl('antd'), url: 'https://ant.design/index-cn' },
    { id: 4, text: 'Naive Ui', introduction: '一个 Vue 3 组件库,使用 TypeScript，快有点意思', img: getImageUrl('naiveui'), url: 'https://www.naiveui.com/zh-CN/os-theme' },
    { id: 5, text: 'Arco Design', introduction: '字节跳动产品设计系统，支持React和Vue双版本', img: getImageUrl('arco'), url: 'https://arco.design/' },
    { id: 6, text: 'iDux', introduction: 'Vue3.x 的 UI 组件库，完全使用 TypeScript 开发', img: getImageUrl('idux'), url: 'https://idux.site/' },
    { id: 7, text: 'Prime Vue', introduction: '易于使用、多功能、高性能的 Vue UI 组件库', img: getImageUrl('primefaces'), url: 'https://www.primefaces.org/primevue/' },
    { id: 8, text: 'Dev UI', introduction: '华为基于 Vue3 和 DevUI 设计的 UI 组件', img: getImageUrl('devui'), url: 'https://vue-devui.github.io/' },
    { id: 9, text: 'Headless UI', introduction: '完全无样式与 Tailwind CSS完美集成。', img: getImageUrl('headlessui'), url: 'https://headlessui.com/' },
    { id: 10, text: 'View Design', introduction: '基于 Vue.js 3 的企业级 UI 组件库和前端解决方案', img: getImageUrl('iviewui'), url: 'https://www.iviewui.com/' },
    { id: 11, text: 'Layui', introduction: '开源模块化前端 UI 框架', img: getImageUrl('layui'), url: 'http://layui.winxapp.cn/' },
  ],
});
function getImageUrl(name: string) {
  const careList = ['element', 'elementv2', 'antd', 'naiveui', 'idux', 'primefaces', 'devui', 'iviewui'];
  if (careList.includes(name)) {
    return new URL(`/tool/${name}.svg`, import.meta.url).href;
  } else {
    return new URL(`/tool/${name}.png`, import.meta.url).href;
  }
}
function toUrl(url: string) {
  window.open(url);
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  padding-bottom: 50px;
  background: var(--home-bg-color, #f5f6fb);
  padding-top: 50px;
  h3 {
    font-size: 28px;
    margin-bottom: 10px;
    margin-left: 50px;
  }
  .line {
    height: 1px;
    background: #ccc;
    margin-left: 50px;
    width: 95%;
    margin-bottom: 20px;
  }
}
.card {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(6, 1fr);
  place-items: center;
  gap: 15px;
  margin-top: 15px;
  &-item:hover {
    cursor: pointer;
    transform: scale(1.2);
  }
  &-item {
    width: 200px;
    height: 200px;
    display: grid;
    place-content: center;
    cursor: pointer;
    text-align: center;
    .logo {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      margin-top: 10px;
    }
    .title {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: var(--home-text-color, #000);
      margin-top: -10px;
    }
    .intr {
      font-weight: bold;
      color: var(--home-tips-color, #606266);
      height: 20px;
      margin-top: 20px;
      line-height: 20px;
    }
  }
}
</style>
